<template>
  <div class="my-income-layout">
    <snackbar style-color="#ffffff" back-color="#65B651" status-color="#ffffff" :fixed="true">
      <template slot="slot">
      </template>
    </snackbar>
    <div class="register">
      <div class="title_text">
        <span>登录/注册炳圣建工账号</span>
      </div>
      <div class="phone">
        <div class="region">
          <img  class="region_img" mode="aspectFit"
            src="../../assets/image/phone.png" alt="">
        </div>
        <div class="input">
          <input type="text" placeholder="请输入手机号">
        </div>
      </div>
      <div v-if="success==true" class="Pop-ups">
        <div class="Popup">
          <div class="Popup_text">
            <span>账号或密码错误,请重新填写</span>
          </div>
          <div @click="queren()" class="Popup_Button">
            <span>确认</span>
          </div>
        </div>
      </div>
      <div v-if="messageState==false" class="phone">
        <div class="region">
          <img  class="region_img" mode="aspectFit"
            src="../../assets/image/Unlock.png" alt="">
        </div>
        <div  class="input" >
          <input v-model="password" type="text" placeholder="请输入登录密码">
          <img v-if="codeState==true" class="Code_img" src="../../assets/image/fork.png" mode="aspectFit" />
        </div>
      </div>
      <div v-if="messageState==true" class="verificationCode">
        <div class="Unlock">
          <img  class="Code_Unlock" mode="aspectFit"
            src="../../assets/image/Unlock.png" alt="">
        </div>
        <div class="Code_input">
          <input v-model="codes" class="input_text" type="text">
          <img v-if="codeState==true" class="Code_img" src="../../assets/image/fork.png" mode="aspectFit" />
        </div>
        <div class="obtain">
          <div  @click="code()" class="span">
            <span>{{code_text}}</span>
          </div>
        </div>
      </div>
      <div class="messageForget">
        <span v-if="messageState==false" @click="messages()" class="message">用短信验证码登录</span>
        <span v-if="messageState==true" @click="messages()" class="message">用密码登录</span>
        <span class="forget">忘记密码?</span>
      </div>
      <div @click="registers()" class="Button">
        <span class="span">登录</span>
      </div>
      <div class="read">
        <span class="span">
          立即注册
        </span>
      </div>
    </div>
     <div v-if="success==true" class="mack">
     </div>
  </div>
</template>

<script>
 export default {
    name: 'passwordLogin',
    data() {
      return {
        ID: "",
        code_text:'获取验证码',
        password:'',
        codeState:false,
        success:false,
        codes:'',
        messageState:false,
      }
    },
    watch :{
      password(){
        if(this.password!=0){
          this.codeState=true
        }else if(this.password.length==0){
          this.codeState=false
        }
      },
      codes(){
        if(this.codes!=0){
          this.codeState=true
        }else if(this.codes.length==0){
          this.codeState=false
        }
      }
    },
    methods: {
      code(){
        this.code_text="60秒"
      },
      registers(){
        this.success=true
      },
      queren(){
        this.success=false
      },
      messages(){
         this.messageState=!this.messageState
         this.code_text="获取验证码"
         this.codeState=false
         this.codes=''
         this.password=''
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-income-layout {
    width: 100vw;
    height: 100vh;
    background-color: #65B651;

    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }

    .register {
      height: 60vh;
      width: 90vw;
      margin: 10vh auto 0 auto;
      border-radius: 20px;
      background-color: #FFFFFF;

      .title_text {
        text-align: center;
        height: 5vh;
        line-height: 5vh;
        padding-top: 7vh;
        span {
          font-size: 1.5em;
        }
      }

      .phone {
        background-color: #F5F6F7;
        width: 86%;
        height: 7vh;
        line-height: 7vh;
        margin: 4vh auto 0 auto;
        border-radius: 3px;
        display: flex;

        .region {
          width: 30%;
          font-size: 1.5em;
          text-align: center;
          display: flex;
          // background-color: #00A2FF;
          align-items: center;
          .region_img{
            margin: 0 auto;
            width: 20px;
            height: 20px;
          }
        }

        .input {
          display: flex;
          align-items: center;
          width: 70%;
          font-size: 1.3em;

          // background-color: #55A532;
          input {
            width: 80%;
            background-color: #F5F6F7;
          }
          .Code_img{
            width: 20px;
            height: 20px;
          }
        }
      }
      .verificationCode{
        background-color: #F5F6F7;
        width: 86%;
        height: 7vh;
        line-height: 7vh;
        margin: 7% auto 0 auto;
        border-radius: 3px;
        display: flex;
        .Unlock{
          display: flex;
          width: 30%;
          align-items: center;
          .Code_Unlock{
            margin: 0 auto;
            width: 20px;
            height: 20px;
          }
        }
        .Code_input{
          display: flex;
          width: 40%;
          align-items: center;
          text-align:center;

          .input_text{
            width: 100%;
            text-align:center;
            font-size: 1.5em;
            letter-spacing:5px;
            background-color: #F5F6F7;
          }
          .Code_img{
            width: 20px;
            height: 20px;
          }
        }
        .obtain{
          width: 30%;
          display: flex;
          align-items: center;
          // color: #65B651;
          // background-color: #55A532;
          .span{
            width: 80%;
            text-align: center;
            font-size: 1em;
            margin: 0 auto;
            height: 5vh;
            line-height: 5vh;
            border-radius: 3px;
            border: 1px solid #65B651;
            color: #65B651;
            span{
              padding: 5% 0;
              background-color: #F5F6F7;
              border-radius: 3px;
              // border: 1px solid #65B651;
            }
          }
        }
      }
      .messageForget{
        width: 86%;
        height: 7vh;
        line-height: 7vh;
        display: flex;
        justify-content: space-between;
        margin:  0 auto;
        .message{
          color: #65B651;
        }
      }
      .Button{
        background-color: #65B651;
        width: 86%;
        height: 7vh;
        line-height: 7vh;
        text-align: center;
        border-radius: 3px;
        margin: 3vh auto 0 auto;
        .span{
          color: #FFFFFF;
          font-size: 1.5em;
        }
      }
      .read{
        width: 86%;
        display: flex;
        align-items: center;
        height: 6vh;
        margin: 2vh auto 0 auto;
        .span{
          color: #65B651;
          margin: 0 auto;
          font-size: 10px;
        }
      }
    }
    .mack{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
      background-color: #333333;
      z-index: 4;
    }
    .Pop-ups {
      width: 90vw;
      height: 20vh;
      position: absolute;
      top: 29vh;
      z-index: 10;
      .Popup{
        width: 70vw;
        height: 20vh;
        margin: 0 auto;
        text-align: center;
        border-radius: 10px;
        background-color: #ffffff;
        font-size: 1.3em;
        .Popup_text{
          height: 12vh;
          line-height: 12vh;
          border-bottom: 1px solid #979797;
        }
        .Popup_Button{
          height: 8vh;
          line-height: 8vh;
        }
      }

    }


  }
</style>
